<template>
  <div class="app-main-container">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/application/applicationCenter' }" :replace="true">应用中心</el-breadcrumb-item>
      <el-breadcrumb-item>抖音团购</el-breadcrumb-item>
    </el-breadcrumb>
    <el-tabs v-model="active" class="mt20" @tab-click="handleClick">
      <el-tab-pane label="商品管理" name="0">
        <QueryForm
          v-model="filters"
          :query-form-config="goodsFormConfig"
          @handleQuery="search"
          @clear="clear"
        />
        <div class="doumee-filter manufacturer">
          <div>
            <el-button type="primary" :loading="tbLoading" @click="tbBtn">同步商品</el-button>
          </div>
        </div>
        <el-table
          ref="table"
          v-loading="listLoading"
          :data="list"
          element-loading-text="Loading"
          border
          fit
          :header-row-class-name="'table-header'"
          class="doumee-element-tableb"
        >
          <el-table-column
            align="center"
            label="抖音商品ID"
            prop="id"
            min-width="160"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="抖音商品名称"
            prop="proName"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="抖音商品价格"
            prop="price"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="套餐名称"
            prop="mealsName"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="兑换数量"
            prop="convertNum"
            min-width="100"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="卡券类型"
            prop="dealTypeName"
            min-width="120"
            show-overflow-tooltip
          />
          <el-table-column
            align="center"
            label="售卖状态"
            prop="saleStatusName"
            min-width="100"
            fixed="right"
            show-overflow-tooltip
          />
          <el-table-column
            key="operate"
            label="操作"
            align="center"
            width="100"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="flex-cc">
                <el-button
                  v-preventReClick
                  type="text"
                  @click="toEdit(scope.row)"
                >配置</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <Pagination
          :total="totalCount"
          :page="pagination.page"
          @current-change="getList"
          @SizeChange="handleSizeChange"
        />
      </el-tab-pane>
      <el-tab-pane label="验券记录" name="2">
        <YjList v-if="active == '2'" />
      </el-tab-pane>
      <el-tab-pane label="管理配置" name="1">
        <Edit v-if="active == '1'" />
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="编辑商品"
      :close-on-click-modal="modalDialog"
      :close-on-press-escape="modalDialog"
      :visible.sync="dialogTableVisible"
      width="800px"
    >
      <el-form
        ref="newDevice"
        class="doumee-form"
        :model="newDevice"
        :rules="rules"
        label-width="110px"
      >
        <el-form-item label="卡券类型" prop="saleStatus">
          <el-select
            v-model="tglx"
            placeholder="请选择卡券类型"
            disabled
            style="width: 100%"
          >
            <el-option label="团购券" value="团购券" />
          </el-select>
        </el-form-item>
        <el-form-item label="商品名称" prop="proName">
          <el-input
            v-model="newDevice.proName"
            class="input-style"
            maxlength="30"
            disabled
            placeholder="请输入商品名称"
          />
        </el-form-item>
        <el-form-item label="售卖价格" prop="price">
          <el-input
            v-model="newDevice.price"
            class="input-style"
            disabled
            maxlength="30"
            placeholder="请输入售卖价格"
          />
        </el-form-item>
        <el-form-item label="售卖状态" prop="saleStatus">
          <el-select
            v-model="newDevice.saleStatus"
            placeholder="请选择售卖状态"
            disabled
            style="width: 100%"
          >
            <el-option
              v-for="item in smlxList"
              :key="item.value"
              :label="item.name"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="关联套餐" prop="mealsId">
          <el-select
            v-model="newDevice.mealsId"
            placeholder="请选择关联套餐"
            style="width: 100%"
          >
            <el-option
              v-for="item in saleTickets"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button v-preventReClick :loading="saveLoading" type="primary" @click="save">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { groupBuyConfigEdit, groupBuyConfigList, mtGetSession, mtProductDetail, mtSaleStatus, mealList } from '@/api'
import store from '@/store'
import { parseTime } from '@/utils'
import YjList from './yjList/index.vue'
import Edit from './edit/index.vue'
import { goodsFormConfig } from './config'
import Pagination from '@/components/paginations'
import QueryForm from '@/components/QueryForm'
export default {
  name: 'Tiktok',
  components: {
    YjList,
    Pagination,
    Edit,
    QueryForm
  },
  data() {
    return {
      modalDialog: store.getters.dialog,
      goodsFormConfig,
      meta: [],
      active: '0',
      dialogTableVisible: false,
      totalCount: 10,
      list: [],
      listLoading: false,
      saveLoading: false,
      tbLoading: false,
      splxList: [],
      smlxList: [],
      weekList: [{
        label: '周一',
        value: '1'
      }, {
        label: '周二',
        value: '2'
      }, {
        label: '周三',
        value: '3'
      }, {
        label: '周四',
        value: '4'
      }, {
        label: '周五',
        value: '5'
      }, {
        label: '周六',
        value: '6'
      }, {
        label: '周日',
        value: '7'
      }, {
        label: '节假日',
        value: '8'
      }],
      filters: {
        checkedStatus: null
      },
      tglx: '团购券',
      newDevice: {
        rules: {}
      },
      param: {},
      pagination: {
        page: 1,
        rows: 10
      },
      rules: {
        appKey: [
          { required: true, message: '请输入app_key', trigger: 'blur' }
        ],
        appSecret: [
          { required: true, message: '请输入app_secret', trigger: 'blur' }
        ],
        openShopUuid: [
          { required: true, message: '请输入open_shop_uuid', trigger: 'blur' }
        ],
        storeName: [
          { required: true, message: '请输入店铺名称', trigger: 'blur' }
        ],
        'rules.groupByProType': [
          { required: true, message: '请选择商品分类', trigger: 'change' }
        ],
        saleStatus: [
          { required: true, message: '请选择售卖状态', trigger: 'change' }
        ],
        dealType: [
          { required: true, message: '请选择业务类别', trigger: 'change' }
        ]
      },
      saleTickets: []
    }
  },
  created() {
    this.meta = this.$route.meta.buttons || []
    this.getLx()
    this.getList(1)
    if (this.$route.query.type) {
      this.active = '1'
    }
  },
  activated() {
    if (this.$route.query.type) {
      this.active = '1'
    }
  },
  mounted() {
    this.showSqy = false
  },
  methods: {
    getLx() {
      const venueId = sessionStorage.getItem('venueId')
      mtSaleStatus({ param: { venueId }}).then(res => {
        if (res.errorCode === '000000') {
          this.smlxList = res.recordList
        }
      })
    },
    getMeals() {
      mealList({
        param: {
          venueId: sessionStorage.getItem('venueId')
        }
      })
        .then(res => {
          if (res.errorCode !== '000000') return
          this.saleTickets = res.recordList
        })
        .catch(err => {
          console.log(err)
        })
    },
    handleSizeChange(value) {
      this.pagination.rows = value
      this.getList(1)
    },
    handleClick(tab, event) {
      console.log(1, tab)
      if (this.active === '0') {
        this.getList(1)
      }
    },
    mtGetSession() {
      const venueId = sessionStorage.getItem('venueId')
      mtGetSession({ param: { venueId, authCode: this.auth_code }}).then(res => {
        if (res.errorCode === '000000') {
          this.getList(1)
        }
      })
    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    tbBtn() {
      this.tbLoading = true
      mtProductDetail({ param: { platform: '2' }}).then(res => {
        this.tbLoading = false
        if (res.errorCode === '000000') {
          this.$message.success('同步成功')
          this.getList(1)
        }
      }).catch(() => {
        this.tbLoading = false
      })
    },
    toEdit(item) {
      this.dialogTableVisible = true
      this.getMeals()
      this.newDevice = { ...item }
      setTimeout(() => {
        this.$refs.newDevice.clearValidate()
      }, 300)
    },
    getList(page) {
      const param = { ...this.filters, platform: '2', venueId: sessionStorage.getItem('venueId') }
      const { pagination } = this
      if (page) {
        this.pagination.page = page
        pagination.page = page
      }
      pagination.firstQueryTime = parseTime(new Date())
      this.listLoading = true
      groupBuyConfigList({
        pagination,
        param
      }, sessionStorage.getItem('venueId')).then(res => {
        this.listLoading = false
        if (res.errorCode === '000000') {
          this.totalCount = res.totalCount
          this.list = res.recordList
          this.$refs.table.doLayout()
        }
      }).catch(() => {
        this.listLoading = false
      })
    },
    clear() {
      this.filters = {}
      this.getList(1)
    },
    search() {
      this.getList(1)
    },
    cancel() {
      this.dialogTableVisible = false
    },
    save() {
      const that = this
      this.$refs.newDevice.validate((valid) => {
        if (valid) {
          that.saveLoading = true
          const param = { ...that.newDevice }
          param.venueId = sessionStorage.getItem('venueId')
          param.proType = '04'
          param.dealId = param.id
          groupBuyConfigEdit({ param }, sessionStorage.getItem('venueId')).then(res => {
            that.saveLoading = false
            if (res.errorCode === '000000') {
              that.dialogTableVisible = false
              that.$message.success('编辑成功')
              that.getList(1)
            }
          }).catch(err => {
            that.saveLoading = false
            console.log(err)
          })
        }
      })
    }
  }
}
</script>
